﻿<!doctype html><!--[if lt IE 7 ]>
<html lang="en" class="ie6">

<![endif]--><!--[if IE 7 ]>
<html lang="en" class="ie7">

<![endif]--><!--[if IE 8 ]>
<html lang="en" class="ie8">

<![endif]--><!--[if IE 9 ]>
<html lang="en" class="ie9">

<![endif]--><!--[if !IE]>
<!-->
<html lang="en">

<!--<![endif]-->

<head>
<title>Using turn.js and the new zoom feature</title>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<link href="css/magazine.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.1.7.js"></script>
<script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="js/hash.js"></script>
<script type="text/javascript" src="js/turn.js"></script>
<script type="text/javascript" src="js/turn.html4.min.js"></script>
<script type="text/javascript" src="js/zoom.min.js"></script>
<script type="text/javascript" src="js/magazine.js"></script>
<script>
$(function(){
var next_button = $(".next-button");              //初始化左右箭头
var previous_button = $(".previous-button");
setArrows();
});

</script>
</head>

<body>

<div id="canvas">
	<!-- 右上角放大缩小按钮 -->
	<div class="zoom-icon zoom-icon-in">
	</div>
	<div class="magazine-viewport">
		<div class="container">
			<div class="magazine">
				<!-- Next button --></div>
		</div>
		<div ignore="1" class="next-button">
		</div>
		<!-- Previous button -->
		<div ignore="1" class="previous-button">
		</div>
	</div>
	<script type="text/javascript">
function loadApp() {
 	$('#canvas').fadeIn(1000);
 	var flipbook = $('.magazine');
 	// Check if the CSS was already loaded	
	if (flipbook.width()==0 || flipbook.height()==0) {
		setTimeout(loadApp, 10);
		return;
	}	
	// 创建flipbook
	flipbook.turn({			
			width: 1200,
  			height: 781,
			duration: 1000,   //翻页速度，值越小越快
			// Hardware acceleration
			acceleration: !isChrome(),
			// Enables gradients
			gradients: true,			
			// Auto center this flipbook
			autoCenter: true,
			// Elevation from the edge of the flipbook when turning a page
			elevation: 50,
			// The number of pages
			pages: 7,
			// Events
			when: {
				turning: function(event, page, view) {					
					var book = $(this),
					currentPage = book.turn('page'),
					pages = book.turn('pages');			
					// Update the current URI
					Hash.go('page/' + page).update();
					// Show and hide navigation buttons
					disableControls(page); 				
				},
				turned: function(event, page, view) {
					disableControls(page);
					$(this).turn('center');
					if (page==1) { 
						$(this).turn('peel', 'br');
					}
				},
				missing: function (event, pages) {
					// Add pages that aren't in the magazine
					for (var i = 0; i < pages.length; i++)
						addPage(pages[i], $(this));
				}
			}
	});

	// Zoom.js
	$('.magazine-viewport').zoom({
		flipbook: $('.magazine'),
		max: function() { 			
			return largeMagazineWidth()/$('.magazine').width();
		}, 
		when: {
			swipeLeft: function() {
				$(this).zoom('flipbook').turn('next');
			},
			swipeRight: function() {				
				$(this).zoom('flipbook').turn('previous');
			},

			resize: function(event, scale, page, pageElement) {
				if (scale==1)
					loadSmallPage(page, pageElement);
				else
					loadLargePage(page, pageElement);
			},
			zoomIn: function () {
				$('.made').hide();
				$('.magazine').removeClass('animated').addClass('zoom-in');
				$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');				
				if (!window.escTip && !$.isTouch) {
					escTip = true;
					$('<div />', {'class': 'exit-message'}).
						html('<div>Press ESC to exit</div>').
							appendTo($('body')).
							delay(2000).
							animate({opacity:0}, 500, function() {
								$(this).remove();
							});
				}
			},
			zoomOut: function () {
				$('.exit-message').hide();
				$('.thumbnails').fadeIn();
				$('.made').fadeIn();
				$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
				setTimeout(function(){
					$('.magazine').addClass('animated').removeClass('zoom-in');
					resizeViewport();
				}, 0);
			}
		}
	});

	// Zoom event
	if ($.isTouch)
		$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
	else
		$('.magazine-viewport').bind('zoom.tap', zoomTo);
	// Using arrow keys to turn the page
	$(document).keydown(function(e){
		var previous = 37, next = 39, esc = 27;
		switch (e.keyCode) {
			case previous:
				// left arrow
				$('.magazine').turn('previous');
				e.preventDefault();
			break;
			case next:
				//right arrow
				$('.magazine').turn('next');
				e.preventDefault();
			break;
			case esc:				
				$('.magazine-viewport').zoom('zoomOut');	
				e.preventDefault();
			break;
		}
	});

	// URIs - Format #/page/1 
	Hash.on('^page\/([0-9]*)$', {
		yep: function(path, parts) {
			var page = parts[1];
			if (page!==undefined) {
				if ($('.magazine').turn('is'))
					$('.magazine').turn('page', page);
			}
		},
		nop: function(path) {
			if ($('.magazine').turn('is'))
				$('.magazine').turn('page', 1);
		}
	});
	$(window).resize(function() {
		resizeViewport();
	}).bind('orientationchange', function() {
		resizeViewport();
	});
	
	// Events for thumbnails
	$('.thumbnails').click(function(event) {		
		var page;
		if (event.target && (page=/page-([0-9]+)/.exec($(event.target).attr('class'))) ) {		
			$('.magazine').turn('page', page[1]);
		}
	});
	$('.thumbnails li').
		bind($.mouseEvents.over, function() {			
			$(this).addClass('thumb-hover');

		}).bind($.mouseEvents.out, function() {
			
			$(this).removeClass('thumb-hover');

		});

	if ($.isTouch) {	
		$('.thumbnails').
			addClass('thumbanils-touch').
			bind($.mouseEvents.move, function(event) {
				event.preventDefault();
			});
	} else {
		$('.thumbnails ul').mouseover(function() {
			$('.thumbnails').addClass('thumbnails-hover');
		}).mousedown(function() {
			return false;
		}).mouseout(function() {
			$('.thumbnails').removeClass('thumbnails-hover');
		});
	}

	// Regions
	if ($.isTouch) {
		$('.magazine').bind('touchstart', regionClick);
	} else {
		$('.magazine').click(regionClick);
	}

	// Events for the next button
	$('.next-button').bind($.mouseEvents.over, function() {		
		$(this).addClass('next-button-hover');
	}).bind($.mouseEvents.out, function() {		
		$(this).removeClass('next-button-hover');
	}).bind($.mouseEvents.down, function() {		
		$(this).addClass('next-button-down');
	}).bind($.mouseEvents.up, function() {		
		$(this).removeClass('next-button-down');
	}).click(function() {
		$('.magazine').turn('next');
		setTimeout(function(){
		setArrows() ;
		},300);
	});

	// Events for the next button	
	$('.previous-button').bind($.mouseEvents.over, function() {		
		$(this).addClass('previous-button-hover');
	}).bind($.mouseEvents.out, function() {		
		$(this).removeClass('previous-button-hover');
	}).bind($.mouseEvents.down, function() {		
		$(this).addClass('previous-button-down');
	}).bind($.mouseEvents.up, function() {		
		$(this).removeClass('previous-button-down');
	}).click(function() {		
		$('.magazine').turn('previous');
		setTimeout(function(){
		setArrows() ;
		},300);

	});
	resizeViewport();
	$('.magazine').addClass('animated');
}

// Zoom icon
 $('.zoom-icon').bind('mouseover', function() {  	
 	if ($(this).hasClass('zoom-icon-in'))
 		$(this).addClass('zoom-icon-in-hover');
 	if ($(this).hasClass('zoom-icon-out'))
 		$(this).addClass('zoom-icon-out-hover'); 
 }).bind('mouseout', function() {  	
 	 if ($(this).hasClass('zoom-icon-in'))
 		$(this).removeClass('zoom-icon-in-hover'); 	
 	if ($(this).hasClass('zoom-icon-out'))
 		$(this).removeClass('zoom-icon-out-hover');
 }).bind('click', function() {
 	if ($(this).hasClass('zoom-icon-in'))
 		$('.magazine-viewport').zoom('zoomIn');
 	else if ($(this).hasClass('zoom-icon-out'))	
		$('.magazine-viewport').zoom('zoomOut');
 });
 $('#canvas').hide();

// Load the HTML4 version if there's not CSS transform
yepnope({
	test : Modernizr.csstransforms,
	yep: ['js/turn.js'],
	nope: ['js/turn.html4.min.js'],
	both: ['js/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
	complete: loadApp
});

</script>

</body>

</html>
<![endif]--></div>

</html>

</html>

</html>

</html>
